<template>
  <div class="mod-config">
    <el-card>
      <el-form :inline="true" :model="dataForm" ref="pickupsearchform" @keyup.enter.native="getDatapickupList()">
        <el-row>
          <el-form-item class="el-col-7" prop="transportorderId" label="运单号">
            <el-input v-model="dataForm.transportorderId" placeholder="运单号" clearable></el-input>
          </el-form-item>
          <el-form-item class="el-col-7" prop="courier" label="快递员姓名">
            <el-select v-model="dataForm.courierid" placeholder="请选择">
              <el-option id="请选择" value="请选择" aria-selected="true" ></el-option>
              <el-option
                v-for="item in clist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="el-col-7" prop="senderaddress" label="发件人地址">
            <el-input v-model="dataForm.senderaddress" placeholder="发件人地址" clearable></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="el-col-7" prop="sendername" label="发件人姓名">
            <el-input v-model="dataForm.sendername" placeholder="发件人姓名" clearable></el-input>
          </el-form-item>
          <el-form-item class="el-col-7" prop="status" label="作业状态">
            <el-select v-model="dataForm.status" placeholder="作业状态">
              <el-option label="待提货" value="1"></el-option>
              <el-option label="在途中" value="2"></el-option>
              <el-option label="已交付" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="el-button--primary" @click="getDatapickupList()">查询</el-button>
            <el-button class="el-button--warning" @click="pickupresetdateform('pickupsearchform')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <el-row>
        <el-button class="el-button--success" @click="makecourierVisible = true">分派快递员</el-button>
      </el-row>
      <el-table
        :data="datapickupList"
        border
        v-loading="datapickupListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="取件作业">
        </el-table-column>
        <el-table-column
          prop="transportorderid"
          header-align="center"
          align="center"
          label="运单编号">
        </el-table-column>
        <el-table-column
          prop="assignedStatus"
          header-align="center"
          align="center"
          label="快递员分配状态">
          <tmplate slot-scope="scope">
            <span>{{ scope.row.assignedStatus == 1 ? '未分配' : scope.row.assignedStatus == 2 ? '已分配' : '待人工分配' }}</span>
          </tmplate>
        </el-table-column>
        <el-table-column
          prop="ordercreatetime"
          header-align="center"
          align="center"
          label="下单时间">
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="作业状态">
          <tmplate slot-scope="scope">
          <span>{{
              scope.row.status == 1 ? '待提货' : scope.row.status == 2 ? '在途中' : scope.row.status == 4 ? '已交付' : '已取消'
            }}</span>
          </tmplate>
        </el-table-column>
        <el-table-column
          prop="courier"
          header-align="center"
          align="center"
          label="快递员姓名">
        </el-table-column>
        <el-table-column
          prop="sendername"
          header-align="center"
          align="center"
          label="发件人姓名">
        </el-table-column>
        <el-table-column
          prop="senderphone"
          header-align="center"
          align="center"
          label="发件人电话">
        </el-table-column>
        <el-table-column
          prop="senderaddress"
          header-align="center"
          align="center"
          label="发件人地址">
        </el-table-column>
        <el-table-column
          prop="estimatedStartTime"
          header-align="center"
          align="center"
          label="计划取件时间">
        </el-table-column>
        <el-table-column
          prop="actualEndTime"
          header-align="center"
          align="center"
          label="完成时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="updatestatus(scope.row.id)">完成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>

    <el-dialog title="分配快递员" :visible.sync="makecourierVisible" :close-on-click-modal="false">

      <el-tabs type="border-card">
        <el-form ref="courierform">
          <el-form-item prop="courierid" class="el-col-12" label="快递员">
            <el-select v-model="courierid" placeholder="请选择">
              <el-option
                v-for="item in clist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="makecourier()">保存</el-button>
        <el-button @click="makecourierVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script src="src/api/work.js"></script>
<script>
import {makecourier, querycourier, getQTaskPickupdispatchList, updatestausbyid} from '../../../api/work'

export default {
  data() {
    return {
      dataForm: {
        transportorderId: '',
        courierid: '',
        senderaddress: '',
        sendername: '',
        status: '',
      },

      courierid: '',

      datapickupList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: null,
      datapickupListLoading: false,
      datapickupListSelections: [],
      makecourierVisible: false,
      item: {
        type: '',
        lable: ''
      },
      clist: []
    }
  },
  mounted() {
    this.getDatapickupList()
    this.querycorier()
  },
  methods: {
    pickupresetdateform() {
      this.$refs['pickupsearchform'].resetFields();
      this.dataForm.courierid = "请选择";
      this.getDatapickupList();
    },
    // 获取数据列表
    getDatapickupList() {
      this.datapickupListLoading = true
      let params = {
        'pageno': this.pageIndex,
        'pagesize': this.pageSize,
        'transportorderId': this.dataForm.transportorderId,
        'courierid': this.dataForm.courierid,
        'senderaddress': this.dataForm.senderaddress,
        'sendername': this.dataForm.sendername,
        'status': this.dataForm.status,
      }
      getQTaskPickupdispatchList(params).then(({data}) => {
        if (data && data.code == 0) {
          this.datapickupList = data.page.rows
          this.totalPage = data.page.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        this.datapickupListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDatapickupList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDatapickupList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.datapickupListSelections = val
    },
    querycorier() {
      querycourier().then(res => {
        console.log(res.data)
        this.clist = res.data.courier
      })
    },

    makecourier() {
      var ids = this.datapickupListSelections.map(item => {
        return item.id
      })
      var idstr = ''
      for (let i = 0; i < ids.length; i++) {
        idstr = idstr + ids[i] + ','
      }
      var courierid = this.courierid
      let params = {
        'cid': courierid,
        'ids': idstr
      }
      if (this.datapickupListSelections.length > 0) {
        makecourier(params).then(({data}) => {
          if (data && data.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.makecourierVisible = false
                this.$refs['courierform'].resetFields()
                this.getDatapickupList()
              }
            })
          }
        })
      } else {
        this.$message({
          message: '请勾选要分配的快递员',
          type: 'warning'
        })
      }
    },
    updatestatus(id) {
      updatestausbyid(id).then(({data}) => {
        if (data && data.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}

/*

*  */
</script>
